// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import Layout from './Layout'
import router from './router'
import './assets/public.css'
import Player from './components/player/index'
import UserLogin from './components/user/index'
import storage from './utils/storage'
import Editor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import {upload} from './api'
let {add,get,remove} = storage
Vue.config.productionTip = false;
Vue.prototype.$play = Player;
Vue.prototype.$login = UserLogin;
Vue.prototype.$add = add;
Vue.prototype.$get = get;
Vue.prototype.$remove = remove;
var toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
  ['blockquote', 'code-block'],

  [{ 'header': 1 }, { 'header': 2 }],               // custom button values
  [{ 'list': 'ordered'}, { 'list': 'bullet' }],
  [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
  [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
  [{ 'direction': 'rtl' }],                         // text direction

  [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
  [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
  [{ 'font': [] }],
  [{ 'align': [] },'image','link','counter','video'],

  ['clean']                                         // remove formatting button
];
Vue.use(Editor, 
  {
    modules: { toolbar: {
      container:toolbarOptions,
      handlers: {
        image: imageHandler,
        counter:counterHndler
      }
    }},
    theme: 'snow',
    placeholder: '增加内容',
    readOnly: true
  })
function counterHndler(){
  var text = this.quill.getText();
  // ql-editor 
  var container = document.querySelector('.ql-editor ');

  var str = prompt();
  if(str){
    container.innerText = text+str
  }
}
function imageHandler() {
    var range = this.quill.getSelection();
    var file = document.createElement('input')
    var value;
    file.type = 'file';

    file.onchange = (e)=>{
      var fileContent = file.files[0]
      var form = new FormData();
      form.append('image',fileContent);
      upload(form).then(res=>{
        if(res.status ===200){
          this.quill.insertEmbed(range.index, 'image', '/upload/'+res.data.data, this.quill.sources);
        }
      })
    }
    file.click();
    if(value){
        this.quill.insertEmbed(range.index, 'image', value, this.quill.sources);
    }
}
new Vue({
  el: '#app',
  router,
  components: { Layout },
  template: '<Layout/>'
})
